<template>
  <div class="body_content_living">
    <div class="content_living_text">
      <h3>{{ Classificationlist.className }}</h3>
      <a href="">查看更多 ></a>
      <span
        class="content_living-texts"
        v-for="Classification in Classificationlist.familyLife"
        :key="Classification.id"
      >
        <a href="#">{{ Classification.name }}</a>
        <strong>/</strong>
      </span>
    </div>
    <div class="content_living_up">
      <div @click="goDetail(Classificationlist.imageBig.id)">
        <img :src="Classificationlist.imageBig?.image" alt="" />
      </div>
    </div>
    <div class="content_living_down">
      <div
        v-for="Classification in Classificationlist.imageSmall"
        :key="Classification.id"
        @click="goDetail(Classification.id)"
      >
        <img :src="Classification.image" alt="" />
        <p>{{ Classification.title }}</p>
        <span>￥{{ Classification.price }}</span
        ><span>￥{{ Classification.originprice }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FamilyLife",
  props: ["Classificationlist"],
  methods: {
    //路由跳转
    goDetail(id) {
      this.$router.push({
        name: "detail",
        params: { id: id },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.body_content_living {
  width: 1519.2px;
  height: 738px;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.body_content_living .content_living_text {
  width: 1090px;
  height: 48px;
  line-height: 48px;
  margin: auto;
}
.body_content_living .content_living_text h3 {
  display: inline-block;
  font-size: 28px;
}
.body_content_living .content_living_text a,
span {
  color: #333333;
  font-size: 14px;
  display: inline-block;
  margin-right: 10px;
}
.body_content_living .content_living_text > a {
  float: right;
}
// .body_content_living .content_living_text a:last-child {
//   float: right;
//   margin-top: 4px;
// }
.body_content_living .content_living_text strong {
  font-weight: 700;
}
.body_content_living .content_living_text span {
  float: right;
}
.body_content_living .content_living_text span:first-child strong {
  display: none;
}
.body_content_living .content_living_text a:hover {
  color: rgb(180, 160, 120);
}
.body_content_living .content_living_down,
.body_content_living .content_living_up {
  width: 1090px;
  height: 310px;
  margin: auto;
}
.body_content_living .content_living_down {
  height: 361px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.body_content_living .content_living_down div {
  width: 265px;
  height: 361px;
  background-color: white;
  font-size: 14px;
  text-align: center;
}

.body_content_living .content_living_down div:hover {
  background-color: #f4f0ea;
  box-shadow: 0 1px 5px 1px #ccc;
}
.body_content_living .content_living_down span:last-child {
  text-decoration: line-through;
}
</style>
